<template>
	<div class="search">
		<div class="box01">
			<input type="text" id="tip02" placeholder="尖椒肉丝">
			<span>取消</span>
		</div>
		<div class="box2_history">
			<div class="his1">
				<p>搜索历史</p>
				<p>清楚搜索历史</p>
			</div>
			<div class="his1_body" v-for="item in his2list">
				<div class="body_lan1">
					<span>{{item.name1}}</span>
					<span>{{item.name2}}</span>
					<span>{{item.name3}}</span>
					<span>{{item.name4}}</span>
				</div>
			</div>
			<div class="his1">
				<p>热门搜索</p>
			</div>
			<div class="his1_body" v-for="item in his2list">
				<div class="body_lan1">
					<span>{{item.name1}}</span>
					<span>{{item.name2}}</span>
					<span>{{item.name3}}</span>
					<span>{{item.name4}}</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				his2list:[
					{
						name1:"娇娇肉丝",
						name2:"鲜花",
						name3:"山姆会员商店",
						name4:"新鲜水果"
					},{
						name1:"水果蛋糕",
						name2:"香槟玫瑰",
						name3:"酸奶",
						name4:"牛奶"
					}
				]
			}
		}
	}
</script>

<style scoped>
	*{
		margin: 0;
		padding: 0;
		width: 80%;
	}
	
	.box01 {
		color: #434343;
		position: relative;
		margin: 20px 0 40px 20px;
		
	}

	.box01 input {
		width: 60%;
		height: 40px;
		border: 1px solid #c6c6c6;
		border-radius: 20px;
		background: #f5f5f5;
		font-size: 14px;
	}

	#tip02 {
		padding: 0 10px 0 50px;
		background-image: url(../../assets/search/search.png);
		background-repeat: no-repeat;
		background-position: 4% 50%;
		background-size: 25px 25px;
	}
	.box01 span{
		font-size: 16px;
		padding-left: 24px;
		text-align: end;
	}
	.his1{
		display: flex;
		margin: 0 20px 0 20px;
	}
	.his1 :nth-child(1){
		font-size: 16px;
		color: black;
		font-weight: bold;
		flex: 1;
	}
	.his1 :nth-child(2){
		font-size: 14px;
		color: black;
		flex: 0.5;
	}
	.his1_body{
		margin: 20px 0 30px 20px;
	}
	.body_lan1 span{
		font-size: 14px;
		background: #f5f5f5;
		border: 1px solid #666666;
		padding: 5px 10px 5px 10px;
		color: #767676;
		border-radius: 5px;
		margin-right: 10px;
	}
	.body_lan2 span{
		font-size: 14px;
		background: #f5f5f5;
		border: 1px solid #666666;
		padding: 5px 10px 5px 10px;
		color: #767676;
		border-radius: 5px;
		margin-right: 10px;
	}
</style>
